<template>
	<div class="echarts-box">
		<div id="myEcharts" :style="{ width: '300px', height: '250px' }"></div>
	</div>
</template>


<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, onUpdated } from 'vue'
/// 声明定义一下echart
let echart = echarts

/**
 * 注册周期。
 */
onMounted(() => {
	initChart()
})

/**
 * 数据发生变化时。
 */
onUpdated(() => {
	initChart()
})
//
// onUnmounted(() => {
// 	echart.dispose(document.getElementById('myEcharts'))
// })

// 基础配置一下Echarts。
const initChart = function initChart() {
	let chart = echart.init(document.getElementById('myEcharts'), null)
	// 把配置和数据放这里。
	chart.setOption({
		series: [
			{
				type: 'gauge',
				center: ['50%', '60%'],
				startAngle: 200,
				endAngle: -20,
				radius: '65%',
				min: 0,
				max: 100, // 温度计最大值。
				splitNumber: 20,
				itemStyle: {
					// 	color: '#7DD058',
					color: [
						[0.35, '#7DDA58'],
						[0.70, '#FDDD60'],
						// [0.75, '#58D9F9'],
						[1, '#FF6E76']
					]
				},
				progress: {
					show: true,
					width: 20
				},
				pointer: {
					length: '70%',
					// show: false
					itemStyle: {
						color: 'auto'
					}
				},
				axisLine: {
					lineStyle: {
						width: 10,
						color: [
							[0.35, '#74b6ab'],
							[0.70, '#FDDD60'],
							// [0.75, '#58D9F9'],
							[1, '#FF6E76']
						]
					}
				},
				axisTick: {
					distance: -25,
					splitNumber: 5,
					lineStyle: {
						width: 1,
						color: '#999'
					}
				},
				splitLine: {
					distance: -32,
					length: 14,
					lineStyle: {
						width: 2,
						color: '#999'
					}
				},
				axisLabel: {
					// distance: -25,
					color: '#999',
					fontSize: 10,
					distance: -15,
					rotate: 'tangential',
					formatter: function (value) {
						switch (value) {
							case 10:
							case 20:
							case 30:
							case 40:
							case 50:
							case 60:
							case 70:
							case 80:
							case 90:
							case 100:
								return value;
							default:
								// code
						}
						return '';
					}
					
				},
				anchor: {
					show: false
				},
				title: {
					show: false
				},
				detail: {
					valueAnimation: true,
					width: '60%',
					lineHeight: 20,
					borderRadius: 8,
					offsetCenter: [0, '50%'],
					fontSize: 15,
					fontWeight: 'bolder',
					formatter: '{value} °C\n温度',
					color: '#aaa'
				},
				data: [
					{
						value: 2000 /*动态数据*/
					}
				]
			}
		]
	})
	window.onresize = function() {
		//自适应大小
		chart.resize()
	}
}



</script>

<style scoped lang="less">

</style>